<template>
    <div>
<!--        面包屑导航-->
        <bread-nav>
            <span slot="nav1">商品管理</span>
            <span slot="nav2">商品列表</span>
        </bread-nav>
<!--        卡片视图-->
        <el-card>
            <div slot="header">
                <el-input placeholder="请输入内容" v-model="goodsQuery.query" @change="searchGood"
                          clearable style="width: 20rem">
                    <template slot="append">
                        <el-button slot="append" icon="el-icon-search" @click="searchGood"
                        ></el-button>
                    </template>
                </el-input>
                <el-button type="primary" class="add_btn" @click="addGood">添加商品</el-button>
            </div>
            <!--        数据表格-->
            <el-table
                    border
                    :data="goodsList"
                    style="width: 100%">
                <el-table-column
                        label="#"
                        type="index">
                </el-table-column>
                <el-table-column
                        prop="goods_name"
                        label="商品名称">
                </el-table-column>
                <el-table-column
                        prop="goods_price"
                        label="商品价格"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="goods_weight"
                        width="100px"
                        label="商品重量">
                </el-table-column>
                <el-table-column
                        prop="add_time"
                        width="200px"
                        label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.add_time | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column
                        width="150px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editGood"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delGood(scope.row.goods_id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--            分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="goodsQuery.pagenum"
                    :page-sizes="[5,10,15,20]"
                    :page-size="goodsQuery.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import BreadNav from "../../components/content/BreadNav";
    import {getGoodsList,delGoodInfo} from "../../network/goods";

    export default {
        name: "GoodsList",
        components:{
            BreadNav
        },
        data(){
            return {
                goodsList:[],
                total:0,
                goodsQuery:{
                    query:'',
                    pagenum:1,
                    pagesize:5
                }
            }
        },
        methods:{
            //获取商品列表数据
            getGoodsListM(){
                getGoodsList(this.goodsQuery).then(res => {
                    if (res.data.meta.status !== 200){
                        this.$message.warning(res.data.meta.msg)
                    }
                    this.goodsList = res.data.data.goods;
                    this.total = res.data.data.total
                })
            },
            //修改当前每页显示条数
            handleSizeChange(val){
                this.goodsQuery.pagesize = val;
                this.getGoodsListM()
            },
            //修改当前页数
            handleCurrentChange(val){
                this.goodsQuery.pagenum = val;
                this.getGoodsListM()
            },
            //搜索商品
            searchGood(){
                this.getGoodsListM()
            },
            addGood(){
                this.$router.push('/add')
            },
            //编辑商品信息
            editGood(){
                this.$message.success('太简单了，不想做！')
            },
            //删除商品
            delGood(id){
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    if (res === 'confirm'){
                        delGoodInfo(id).then(res => {
                            if (res.data.meta.status !== 200){
                                this.$message.error(res.data.meta.msg)
                            }
                            this.$message.warning(res.data.meta.msg);
                            this.getGoodsListM();
                        })
                    }
                }).catch(error => error)
            }

    },
        mounted() {
            this.getGoodsListM()
        }
    }
</script>

<style scoped lang="less">
    .add_btn{
        margin-left: 1rem;
    }

</style>